<!--
 * @Author: 晟松
 * @Date: 2021-12-16 16:55:58
 * @LastEditors: 晟松
 * @LastEditTime: 2022-02-11 13:05:40
 * @FilePath: \volunteer-vue3-admin\src\views\Message.vue
 * @Description: 
-->
<template>
    <div>
        <div class="head">
            <!-- <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">标题</el-col>
                <el-col :span="16">
                    <el-input v-model="nameInput" placeholder="请输入用户名称" clearable />
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">手机号码</el-col>
                <el-col :span="16">
                    <el-input v-model="phoneInput" placeholder="请输入用户手机号码" clearable />
                </el-col>
            </el-row>-->
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">消息类型</el-col>
                <el-col :span="16">
                    <el-select v-model="messageType" class="m-2" placeholder="消息类型" size="large" clearable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="20">
                    <el-button type="primary" size="small" @click="serach">搜索</el-button>
                    <el-button type="info" size="small" @click="reset">重置</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="10" class="allBtn">
                <el-col :span="1.1">
                    <el-button type="success" plain icon="plus" size="mini" @click="handleAddMessage">添加消息</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="show">
            <el-table :data="data.showList" style="width: 100%" stripe @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="id">
                    <template #default="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column property="title" label="标题" />
                <el-table-column property="message" label="消息" width="200" />
                <el-table-column property="createdAt" label="创建时间" width="200" align="center" />
                <!-- <el-table-column align="center" width="230">
                    <template #header>
                        操作
                    </template>
                    <template #default="scope">
                        <el-button type="text" size="small" icon="edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" size="small" icon="delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>-->
            </el-table>
            <div class="demo-pagination-block" :style="{ float: 'right', marginTop: '10px' }">
                <el-pagination
                    :page-size="20"
                    :small="false"
                    :disabled="false"
                    :background="true"
                    layout="total, prev, pager, next"
                    :total="data.showList.length"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 新增用户 -->
        <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="40%">
            <el-form :model="dialogForm" :label-position="dialogLablePosition" :rules="rules">
                <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="dialogForm.title" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="内容" :label-width="formLabelWidth" prop="message">
                    <el-input v-model="dialogForm.message" autocomplete="off" clearable type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addMessage">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, computed, onBeforeMount, onMounted, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import enums from "@/utils/enums";
import { batchRegisterStudent } from "../myApi/school";
import { ElMessage } from 'element-plus'
import { addGlobalMessage, getMineMessageList } from "../myApi/message";



const store = useStore();
const router = useRouter();
let identity = computed(() => store.getters.identity);
let userAdmin = computed(() => store.getters.user);
let schoolAdmin = computed(() => store.getters.schoolAdmin);

let data = reactive({ messageList: {}, showList: [], systemMessage: [], oneMessage: [], globalMessage: [] })
async function init() {
    data.messageList = await getMineMessageList()
    console.log('data.messageList: ', data.messageList);
    data.showList = data.messageList.data.allMessageList
    data.globalMessage = data.messageList.data.globalMessage
    data.systemMessage = data.messageList.data.systemMessage
    data.oneMessage = data.messageList.data.oneMessage
}
onBeforeMount(async () => {
    await init()
})


let messageType = ref('')
let options = [
    {
        value: 'one',
        label: "单独消息",
    },
    {
        value: 'global',
        label: "全体消息",
    },
    {
        value: 'system',
        label: "系统消息",
    },
];
const serach = () => {
    if (messageType.value == 'one') {
        data.showList = data.oneMessage
    } else if (messageType.value == 'global') {
        data.showList = data.globalMessage
    } else if (messageType.value == 'system') {
        data.showList = data.systemMessage
    }
}
const reset = () => {
    messageType.value = ''
}




let editForm = ref({})
let editFormVisible = ref(false)
let editFormTitle = ref('编辑信息')
// 只有校级管理员才可以修改比如学校，学院这一些信息
// let editFormDisabled = ref(schoolAdmin.value)
let editFormDisabled = ref(false)

const handleEdit = (index, message) => {
    console.log('message: ', message);
    editForm.value = message
    editFormVisible.value = true
}

const handleDelete = (index, message) => {

}

// 表单校验规则
const rules = reactive({
    title: [
        {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
        }
    ],
    message: [{
        required: true,
        message: '请输入内容',
        trigger: 'blur',
    }],
})

let dialogFormVisible = ref(false)
let dialogTitle = '添加消息（注意是发送给自己所管理的所有人员）'
let formLabelWidth = '140px'
let dialogLablePosition = 'left'
let dialogForm = reactive({
    title: '',
    message: ''
})
const addMessage = async () => {
    console.log('dialogForm: ', dialogForm);
    let params = {
        id: userAdmin.value.id,
        identity: userAdmin.value.identity,
        isPublic: false,//表示是一个辅导员或者居委会发给自己的所有被管理人员的信息
        title: dialogForm.title,
        message: dialogForm.message
    }
    let res = await addGlobalMessage(params)
    console.log('res: ', res);
    if (res.data.id) {
        dialogFormVisible.value = false;
        // 然后清除dialogForm里的数据，这里就不动了

        // 重新获取列表
        init();
    }
}
const handleAddMessage = () => {
    console.log('handleAddMessage: ');
    dialogFormVisible.value = true

}


const multipleSelection = ref([])
/**
 * @description: 处理多行的多选
 * @param {*} val
 * @return {*}
 */
const handleSelectionChange = (val) => {
    console.log('handleSelectionChange val: ', val);
    multipleSelection.value = val
}

// 分页所需的东西
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}
</script>

<style lang="scss" scoped>
.head {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    .allBtn {
        margin: 10px;
    }
    .row {
        margin: 0 10px;
        min-width: 20vw;
        .title {
            font-size: 0.9rem;
            font-weight: bold;
        }
    }
}
.show {
    .optionBtn {
    }
}
</style>
